<!DOCTYPE html>
<!-- 在html标签中加入thymeleaf 的命名空间 xmlns ==> xml name space -->
<html lang="en" xmlns:th="www.thymeleaf.org" >
<head>
    <title>主页</title>
    
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Blog Template">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">    
    <link rel="shortcut icon" href="favicon.ico"> 
    
    <!-- FontAwesome JS-->
    <script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"></script>
    
    <!-- Theme CSS -->  
    <link id="theme-style" rel="stylesheet" href="assets/css/theme-1.css">
    <link id="theme-style" rel="stylesheet" href="assets/css/div-container.css">

</head> 

<body>
    
    <header class="header text-center">	    
	    <h1 class="blog-name pt-lg-4 mb-0"><a href="index.html">俊羽的博客</a></h1>
        
	    <nav class="navbar navbar-expand-lg navbar-dark" >
           
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
			</button>

			<div id="navigation" class="collapse navbar-collapse flex-column" >
				<div class="profile-section pt-3 pt-lg-0">
					<!-- 头像可以从数据库中取得 -->
				    <img class="profile-image mb-3 rounded-circle mx-auto" th:src="${user.headImage==null||user.headImage==''}?${defaultHead}:${user.headImage}" alt="image" >			
					
					<div class="bio mb-3">你好，我叫沈俊羽，简单的先介绍一下自己，您还可以点击链接进一步的了解我。<br><a href="javascript:toAbout()">了解更多</a></div><!--//bio-->
					<ul class="social-list list-inline py-3 mx-auto">
						<!-- 这里可以使用数据库，循环获取 -->
			            <li class="list-inline-item"><a href="https://github.com/shenjuyu"><i class="fab fa-github-alt fa-fw"></i></a></li>
			        </ul><!--//social-list-->
			        <hr> 
				</div><!--//profile-section-->
				
				<ul class="navbar-nav flex-column text-left">
					<li class="nav-item active" id="nav-item1">
					    <a class="nav-link" href="javascript:toIndex()"><i class="fas fa-home fa-fw mr-2"></i>主页 <span class="sr-only">(current)</span></a>
					</li>
					<li class="nav-item" id="nav-item2">
					    <a class="nav-link" href="javascript:toList()"><i class="fas fa-bookmark fa-fw mr-2"></i>博客列表</a>
					</li>
					<li class="nav-item" id="nav-item3">
					    <a class="nav-link" href="javascript:toAbout()"><i class="fas fa-user fa-fw mr-2"></i>关于我</a>
					</li>
				</ul>
				
				<div class="my-2 my-md-3">
				    <a class="btn btn-primary" href="javascript:void(0)" onclick="pop_box()">联系方式</a>
				</div>
			</div>
		</nav>
    </header>
    
    <div id="indexBody">
	    
    </div>
    
    <!-- 弹出模态框 -->
    <div id="alertBox">
		
	</div>
    
    <!-- *****CONFIGURE STYLE (REMOVE ON YOUR PRODUCTION SITE)****** -->  
    <div id="config-panel" class="config-panel d-none d-lg-block">
        <div class="panel-inner">
            <a id="config-trigger" class="config-trigger config-panel-hide text-center" href="#"><i class="fas fa-cog fa-spin mx-auto" data-fa-transform="down-6" ></i></a>
            <h5 class="panel-title">选择主题</h5>
            <ul id="color-options" class="list-inline mb-0">
                <li class="theme-1 active list-inline-item"><a data-style="assets/css/theme-1.css" href="#"></a></li>
                <li class="theme-2  list-inline-item"><a data-style="assets/css/theme-2.css" href="#"></a></li>
                <li class="theme-3  list-inline-item"><a data-style="assets/css/theme-3.css" href="#"></a></li>
                <li class="theme-4  list-inline-item"><a data-style="assets/css/theme-4.css" href="#"></a></li>
                <li class="theme-5  list-inline-item"><a data-style="assets/css/theme-5.css" href="#"></a></li>
                <li class="theme-6  list-inline-item"><a data-style="assets/css/theme-6.css" href="#"></a></li>
                <li class="theme-7  list-inline-item"><a data-style="assets/css/theme-7.css" href="#"></a></li>
                <li class="theme-8  list-inline-item"><a data-style="assets/css/theme-8.css" href="#"></a></li>
            </ul>
            <a id="config-close" class="close" href="#"><i class="fa fa-times-circle"></i></a>
        </div><!--//panel-inner-->
    </div><!--//configure-panel-->

    
       
    <!-- Javascript -->          
    <script src="assets/plugins/jquery-3.3.1.min.js"></script>
    <script src="assets/plugins/popper.min.js"></script> 
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> 

    <!-- Style Switcher (REMOVE ON YOUR PRODUCTION SITE) -->
    <script src="assets/js/demo/style-switcher.js"></script>     
    <script type="text/javascript">
    	
    	$('#indexBody').load('loadIndexPlugin.do');
    
    	function toIndex(){
    		$('.nav-item').removeClass('active');
    		var pre=$('.nav-item1').attr('class');
    		$('#nav-item1').attr('class','nav-item active');
    		
    		$('#indexBody').load('toLodeIndex.do');
    	}
    	
    	function toArticle(id){
    		$('#indexBody').load('blog-post.do?id='+id);
    	}
    	
    	function toList(){
    		$('.nav-item').removeClass('active');
    		$('#nav-item2').attr('class','nav-item active');
    		
    		$('#indexBody').load('toList.do');
    	}
    	
    	function nextPage(){
    		$('#indexBody').load('nextPage.do');
    	}
    	
    	function prePage(){
    		$('#indexBody').load('prePage.do');
    	}
    	
    	function toAbout(){
    		$('.nav-item').removeClass('active');
    		var pre=$('.nav-item3').attr('class');
    		$('#nav-item3').attr('class','nav-item active');
    		
    		$('#indexBody').load('toAbout.do');
    	}
    	
    	/*按钮弹出模态框*/
        function pop_box(){
        	$('#alertBox').load('getTel.do');
        }

        /*确认事件，因为现在没有确认事件，就将弹出框隐藏*/
        function confrim(){
            var container = document.getElementById('div-container');
            container.style.display="none";
        }
        
        function toSubscribe(){
        	var email = $('#semail').val();
        	alert(email);
        	$('#alertBox').load('toSubscribe.do?email='+email);
        }
    </script>

</body>
</html> 

